.Method {
  @vertical-padding: 8px;
  @horizontal-padding: 10px;

  margin: -1px 19px;
  padding: (@vertical-padding + 1px) (@horizontal-padding + 1px);
  background-color: white;
  border-radius: 5px;

  font-size: 16px;
  text-align: center;
  list-style: none;

  @media (prefers-color-scheme: dark) {
    background-color: rgb(30, 30, 30);
  }

  &--main {
    font-weight: 600;
  }

  &--secondary {
    font-style: italic;
  }

  &--endsInMiddle {
    margin-right: 0;
  }

  &.render {
    --base-color-rgb: 0, 106, 255;
  }

  &.pre-commit {
    --base-color-rgb: 245, 179, 0;
  }

  &.commit {
    --base-color-rgb: 12, 120, 0;
  }

  a,
  span {
    display: block;
    width: 100%;
    height: 100%;
    margin: (-@vertical-padding - 1px) (-@horizontal-padding - 1px);
    padding: @vertical-padding @horizontal-padding;
    background-color: rgba(var(--base-color-rgb), 0.2);
    border: 1px solid rgba(var(--base-color-rgb), 0.64);
    border-radius: 5px;

    @media (prefers-color-scheme: dark) {
      background-color: rgba(var(--base-color-rgb), 0.1);
    }
  }

  a {
    font: inherit;
    color: inherit;
    text-decoration: none;

    &:hover,
    &:focus {
      background-color: rgb(255, 255, 255);
      position: relative;
      z-index: 1;

      @media (prefers-color-scheme: dark) {
        background-color: rgb(120, 120, 120);
        background-image: linear-gradient(
          to right,
          rgba(var(--base-color-rgb), 0.2),
          rgba(var(--base-color-rgb), 0.2)
        );
      }

      @supports (-moz-outline-radius: 5px) {
        outline: 2px solid var(--border-color);
        outline-offset: -1px;
        -moz-outline-radius: 5px;
      }

      @supports (not (-moz-outline-radius: 5px)) {
        margin: (-@vertical-padding - 2px) (-@horizontal-padding - 2px);
        border-width: 2px;
      }
    }
  }
}
